<template>
  <a-modal
    :visible="show"
    width="50vw"
    height="60vh"
    :bodyStyle="{ padding: '10px' }"
    :title="label + '选择器'"
    @ok="handleOk"
    @cancel="handleClose"
    :maskClosable="false"
    :key="show"
  >
    <div class="search-box" style="display: flex">
      <div style="display: flex; width: 400px">
        <a-input
          placeholder="请输入费用号查询"
          v-model="pagination.keyword"
          @keyup.enter.native="handlerSearch"
        /><a-button @click="handlerSearch">查询</a-button>
      </div>
    </div>
    <div class="el-dialog-div">
      <a-table
        :scroll="{ x: '100%' }"
        class="hte-table-content"
        :columns="columns"
        :data-source="records"
        rowKey="randomStr"
        bordered
        :pagination="false"
        :customRow="customRow"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
      </a-table>
      <a-pagination
        show-size-changer
        :default-current="1"
        :total="pagination.total"
        @change="pageChange"
        @showSizeChange="onShowSizeChange"
        :show-total="(total) => `共 ${total} 条记录`"
      />
    </div>
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  components: {},
  props: {},
  mounted() {},
  data() {
    return {
      label: '费用号',
      records: [],
      pagination: {
        offset: 0,
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
      columns: [
        {
          title: '费用号',
          dataIndex: 'costNumber',
          width: '150px',
          align: 'left',
        },
        {
          title: '项目号',
          dataIndex: 'projectCode',
          width: '100px',
          align: 'left',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: '400px',
          align: 'left',
        },
        {
          title: '项目经理',
          dataIndex: 'projectManager',
          width: '120px',
          align: 'left',
        },
      ],
      urls: {
        wbsNumber: '/materials/wbsNumber',
        costNumber: '/materials/costNumber',
      },
      selectedRow: {},
      show: false,
      costType: null,
      selectedRowKeys: [],
      selectedRow: [],
    }
  },
  methods: {
    doSelect(costType) {
      this.costType = costType
      this.costNumberList = []
      if (this.costType == '1') {
        this.label = '成本中心号'
      } else {
        this.label = 'WBS号'
      }
      this.$set(this.pagination, 'current', 1)
      this.$set(this.pagination, 'keyword', '')
      this.selectedRow = []
      this.currentRow = {}
      this.show = true
      this.fetchList()
    },
    handlerSearch() {
      this.$set(this.pagination, 'current', 1)
      this.fetchList()
    },
    fetchList() {
      if (this.costType == '1') {
        this.fetchCostCenter()
      } else {
        this.fetchWbs()
      }
    },
    fetchCostCenter() {
      postAction(this.urls.costNumber, this.pagination).then((res) => {
        if (res.success) {
          let list = res.result.records
          list.forEach((l) => {
            l.randomStr = this.getRandomStr(10)
          })
          this.records = list
          this.$set(this.pagination, 'total', res.result.total)
        } else {
          this.$message.error('获取权限内成本中心号失败:' + res.$message)
        }
      })
    },
    fetchWbs() {
      postAction(this.urls.wbsNumber, this.pagination).then((res) => {
        if (res.success) {
          let list = res.result.records
          list.forEach((l) => {
            l.randomStr = this.getRandomStr(10)
          })
          this.records = list
          this.$set(this.pagination, 'total', res.result.total)
        } else {
          this.$message.error('获取权限内WBS号失败:' + res.$message)
        }
      })
    },
    handleClose() {
      this.show = false
      this.$emit('close', null)
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.currentRow = {}
            this.show = false
            this.$emit('close', record)
          },
          click: (event) => {
            this.currentRow = record
          },
        },
      }
    },
    handleOk() {
      if (this.selectedRow && this.selectedRow.length > 0) {
        this.$emit('close', this.selectedRow[0])
      }
      this.show = false
    },
    pageChange(current, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'current', current)
      this.fetchList()
    },
    onShowSizeChange(current, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'current', 1)
      this.fetchList()
    },
    getRandomStr(len) {
      len = len || 32
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
  },
}
</script>
<style>
.custom-tree-node {
  color: red;
}
.el-dialog-div {
  height: 60vh;
  overflow-y: auto;
}
</style>